<template>
  <div>
    <el-card>
      <div style="display: flex; align-items: center;justify-content: space-between;">
    <el-page-header @back="goBack" content="发布公告">
    </el-page-header>
      <el-button type="primary" icon="el-icon-plus" plain @click="submitForm">发布</el-button>
      </div>
    </el-card>

    <el-card>
      <el-form style="margin: 0 auto" ref="form" :model="noticeForm" :rules="rules" label-width="100px">
        <el-form-item label="公告主题" prop="topic">
          <el-input v-model="noticeForm.topic" placeholder="请输入公告主题"></el-input>
        </el-form-item>
      </el-form>
      <div style="border: 1px solid #ccc;">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            style="height: 500px; overflow-y: hidden;"
            v-model="noticeForm.content"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import axios from "axios";
export default {
  components: { Editor, Toolbar },
  name: "Release",
  data(){
    return{
      editor: null,
      toolbarConfig: {},
      editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF:{
          uploadImage:{
            server: 'http://localhost:8888/notice/upload',
            fieldName: 'file',
            // 单个文件的最大体积限制，默认为 2M
            maxFileSize: 5 * 1024 * 1024, // 1M

            // 最多可上传几个文件，默认为 100
            maxNumberOfFiles: 10,

            // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
            allowedFileTypes: ['image/*'],
            headers:{
              Authorization:localStorage.getItem('token')
            },
            // 单个文件上传成功之后
            // onSuccess(file: File, res: any) {  // TS 语法
            onSuccess(file, res) {          // JS 语法
              console.log(`${file.name} 上传成功`, res)
            },
            // 单个文件上传失败
            // onFailed(file: File, res: any) {   // TS 语法
            onFailed(file, res) {           // JS 语法
              console.log(`${file.name} 上传失败`, res)
            },
            // 上传错误，或者触发 timeout 超时
            // onError(file: File, err: any, res: any) {  // TS 语法
            onError(file, err, res) {               // JS 语法
              console.log(`${file.name} 上传出错`, err, res)
            },
            // 自定义插入图片
            // customInsert(res: any, insertFn: InsertFnType) {  // TS 语法
            customInsert(res, insertFn) {                  // JS 语法
              // res 即服务端的返回结果
              console.log(res.data)
              // 从 res 中找到 url alt href ，然后插入图片
              insertFn(res.data, "", "")
            }
          },
          uploadVideo:{
            server: 'http://localhost:8888/notice/upload',
            fieldName: 'file',
            // 单个文件的最大体积限制，默认为 2M
            maxFileSize: 200 * 1024 * 1024, // 5M

            // 最多可上传几个文件，默认为 100
            maxNumberOfFiles: 10,

            // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
            allowedFileTypes: ['video/*'],
            headers:{
              Authorization:localStorage.getItem('token')
            },
            // 单个文件上传成功之后
            // onSuccess(file: File, res: any) {  // TS 语法
            onSuccess(file, res) {          // JS 语法
              console.log(`${file.name} 上传成功`, res)
            },
            // 单个文件上传失败
            // onFailed(file: File, res: any) {   // TS 语法
            onFailed(file, res) {           // JS 语法
              console.log(`${file.name} 上传失败`, res)
            },
            // 上传错误，或者触发 timeout 超时
            // onError(file: File, err: any, res: any) {  // TS 语法
            onError(file, err, res) {               // JS 语法
              console.log(`${file.name} 上传出错`, err, res)
            },
            // 自定义插入图片
            // customInsert(res: any, insertFn: InsertFnType) {  // TS 语法
            customInsert(res, insertFn) {                  // JS 语法
              // res 即服务端的返回结果
              console.log(res.data)
              // 从 res 中找到 url alt href ，然后插入图片
              insertFn(res.data, "")
            }
          }
        }
      },
      mode: 'default',
      noticeForm:{
        topic:'',
        content:'',
        author:'',
        createdate:'',
        id:''
      },
      rules:{
        topic: [
          { required: true, message: '请输入公告主题', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor)
    },
    goBack() {
      window.history.back();
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 获取当前登录用户的用户名
          const username = sessionStorage.getItem('username');
          if (!username) {
            this.$message.error('未找到当前登录用户');
            return;
          }

          // 设置作者和创建时间
          this.noticeForm.author = username;
          this.noticeForm.createdate = new Date().toISOString();

          // 提交表单数据
          axios.post('/notice/addNotice', this.noticeForm)
              .then(response => {
                if (response.data.success) {
                  this.$message.success('公告发布成功');
                  // 跳转到 NoticeViews.vue
                  this.$router.push({ name: 'notice_list' });
                } else {
                  this.$message.error('公告发布失败');
                }
              })
              .catch(error => {
                console.error('公告发布失败:', error);
                this.$message.error('公告发布失败');
              });
        } else {
          this.$message.error('请检查表单填写');
          return false;
        }
      });
    }
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scoped>

</style>